<!-- 公共头部组件
    该组件注意事项：
    1、用户名下拉框使用 popover弹出框 组件，样式是自定义的
-->

<template>
    <div class="topbar-wrap">
        <h1>
            <router-link to="/home/index">{{ menuTitle }}</router-link>
        </h1>
        <div>
            <el-popover
                ref="popover"
                popper-class="topbar-drop"
                placement="bottom"
                trigger="hover"
                @show="showDrop"
                @hide="hideDrop"
            >
                <ul class="topbar-drop-con">
                    <li><router-link to="/update-password">修改密码</router-link></li>
                    <li><router-link to="/login">退出登录</router-link></li>
                </ul>
            </el-popover>
            <div class="topbar-user" v-popover:popover>
                <i class="icon iconfont icon-user"></i>
                <span>{{ loginName }}</span>
                <i :class="[ dropStatus ? 'el-icon-arrow-up' : 'el-icon-arrow-down' ]"></i>
            </div>
        </div>
    </div>
</template>

<script>

import mTitle from '@/config/mTitle'
import { getStore } from '@/config/mUtils'

export default {
    name: 'topBar',
    data() {
    	return {
    		menuTitle: '',
    		loginName: '',
            dropStatus: false
    	}
    },
    mounted() {
    	let loginName = getStore('loginName');

    	// 获取登陆名
    	if (!loginName) {
    		this.$router.push('/login');
    	}else {
    		this.loginName = loginName;
    	}
    	// 设置菜单标题
    	this.menuTitle = mTitle.menuTitle;
    },
    methods: {
        // 展开下拉菜单
    	showDrop() {
    		this.dropStatus = true;
    	},
        // 收起下拉菜单
        hideDrop() {
            this.dropStatus = false;
        }
    }
}
</script>

<!-- 这里不能有scoped，不然给el-popover组件类名设的样式无效 -->
<style lang="less">
    @import '../assets/css/base.less';
    .topbar-wrap {
    	display: flex;
    	height: 100%;
    	align-items: center;
    	justify-content: space-between;
    	h1 {
    		font-size: 23px;
    		a {
                color: #d5e5f8;
            }
    	}
    }
    .topbar-user {
    	font-size: 16px;
        .iconfont {
            font-size: 20px;
            vertical-align: middle;
        }
    }
    .topbar-drop {
        box-sizing: border-box;
        width: 100px;
        min-width: auto;
    }
    .topbar-drop-con {
        li {
            line-height: 26px;
            a {
                display: block;
                color: @textColor;
                text-align: center;
            }
        }
    }
</style>